import React from "react"

// 在需要使用数据的地方引入观察者
import { observer } from "mobx-react-lite";

import { useStore } from './store/store'

function Count () {
  const { counterStore, listStore } = useStore()
  return (
    <div>
      {/* 即可通过Store获取需要的数据 */}
      {counterStore.count}
      {/*使用计算属性*/}
      {counterStore.filterList.join('-')}
      {/* 点击事件触发action函数修改count*/}
      <button onClick={counterStore.addCount}>+</button>
      <button onClick={counterStore.decrementCount}>-</button>
      {/*点击事件触发计算属性*/}
      <button onClick={counterStore.addList}>添加数据</button>
      <br />
      {listStore.list.join('-')}
      {/*点击事件触发添加*/}
      <button onClick={listStore.addList}>修改数组</button>
    </div>
  )
}
// 在需要使用数据的地方将组件用观察者包一下
export default observer(Count)